<template>
  <div id="recommend" class="flex">
    <router-view></router-view>
    <div class="content-l fl flex column">
      <div class="content-title shrink">
        <span class="line-y"></span>
        <span class="left">今日头条</span>
        <span class="right" @click="skip">全网必读</span>
      </div>
      <div class="news flex column">
        <ul class="breviary">
          <li
            v-for="(item, index) in topNews"
            :key="index"
            @click="link(item.share_url, item.title)"
          >
            <span class="red">[{{ item.channel_name }}]</span>
            <span class="text">{{ item.title }}</span>
            <span class="time">{{ item.release_date | date }}</span>
          </li>
        </ul>
        <ul class="minute flex column grow">
          <li
            v-for="(item, index) in recNews"
            :key="index"
            @click="link(item.share_url, item.title)"
          >
            <div class="left fl">
              <img :src="item.type_img" alt />
            </div>
            <div class="right fr">
              <h1>{{ item.title }}</h1>
              <p>{{ item.descriptionStr.trim() }}</p>
              <h3>{{ item.release_date | timeFormat }}</h3>
            </div>
          </li>
          <p class="loadMore" @click="loadMore" v-show="loadShow">
            加载更多
            <i class="icon"></i>
          </p>
        </ul>
      </div>
    </div>
    <div class="content-r fr flex column">
      <div class="menology grow">
        <div class="content-title">
          <span class="line-y"></span>
          <span class="left">财经日历</span>
        </div>
        <div class="tab">
          <div class="tab-item1" :class="{ active: ison }" @click="select1(1)">
            国内
          </div>
          <div class="tab-item1" :class="{ active: !ison }" @click="select1(2)">
            国际
          </div>
        </div>
        <div class="inland" v-show="ison">
          <div class="item" v-show="meeting.length != 0">
            <h1 class="title">
              <img src="../image/zhongdahuiyi_icon.png" alt />重大会议
            </h1>
            <div class="ul">
              <div class="boxs" v-for="(item, index) in meeting" :key="index">
                <div class="li">
                  <div class="fl"></div>
                  {{ item.content }}
                </div>
                <div class="involve" v-if="item.stockNames != '——'">
                  相关股票:
                  <span
                    v-for="(stock, index) in item.stockNames"
                    :key="index"
                    >{{ stock | formatStock }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="item" v-show="internal.length != 0">
            <h1 class="title">
              <img src="../image/jingjishuju_icon.png" alt />经济数据
            </h1>
            <div class="ul">
              <div class="li" v-for="(item, index) in internal" :key="index">
                <div class="fl"></div>
                {{ item.indicatorName }}
                <p class="yuce">
                  <span>前值：{{ item.indicatorFormer }}</span>
                  <span>预测：{{ item.indicatorForecast }}</span>
                  公布：{{ item.indicatorFact }}
                </p>
              </div>
            </div>
          </div>
          <div class="item" v-show="contract.length != 0">
            <h1 class="title">
              <img src="../image/zhongdahetong_icon.png" alt />重大合同
            </h1>
            <table style="margin-top: 20px">
              <thead>
                <tr>
                  <td width="35%">股票</td>
                  <td width="35%">签订合同</td>
                  <td width="35%">占上年应收比</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in contract" :key="index">
                  <td style="color: #02e2f4">
                    {{ item.stockName }}
                    <p style="font-size: 12px; color: #8c8c8c">
                      {{ item.stockCode }}
                    </p>
                  </td>
                  <td>{{ item.amountInvolved | conversion }}</td>
                  <td>{{ item.totalOperatingRevenueRate | fixed2 }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="item" v-show="dividend.length != 0">
            <h1 class="title">
              <img src="../image/fenhongsongzhuan_icon.png" alt />分红转送
            </h1>
            <table style="margin-top: 20px">
              <thead>
                <tr>
                  <td width="35%">股票</td>
                  <td width="35%">决案公布日</td>
                  <td width="35%">分配方案</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dividend" :key="index">
                  <td style="color: #02e2f4">
                    {{ item.stockName }}
                    <p style="font-size: 12px; color: #8c8c8c">
                      {{ item.stockCode }}
                    </p>
                  </td>
                  <td>{{ item.smDeciPublDate }}</td>
                  <td>{{ item.allocationPlan }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="zwsj"
            v-show="
              dividend.length == 0 &&
              contract.length == 0 &&
              meeting.length == 0 &&
              internal.length == 0
            "
          >
            <img src="../image/wushuju.png" alt />
          </div>
        </div>

        <div class="internation" v-show="!ison">
          <div
            class="guojiItem clear"
            v-show="guoji.length != 0"
            v-for="(item, index) in guoji"
            :key="index"
          >
            <div class="time fl">{{ item.occurTime }}</div>
            <div class="itemBox fr">
              <div class="headTitle">{{ item.indicatorName }}</div>
              <div class="exponent">
                <span>前值：{{ item.indicatorFormer }}</span>
                <span>预测：{{ item.indicatorForecast }}</span>
                <span>公布：{{ item.indicatorFact }}</span>
              </div>
              <div class="screen clear">
                <div class="lihao screenItem fl">
                  <span>利好</span>
                  {{ item.positiveEffect }}
                </div>
                <div class="likong screenItem fr">
                  <span>利空</span>
                  {{ item.negativeEffect }}
                </div>
              </div>
            </div>
          </div>
          <div class="zwsj" v-show="guoji.length == 0">
            <img src="../image/wushuju.png" alt />
          </div>
        </div>
      </div>
      <div class="newStock">
        <div class="content-title">
          <span class="line-y"></span>
          <span class="left">新股中心</span>
        </div>
        <div class="tab">
          <div
            class="tab-item2"
            :class="{ active: icon }"
            @click.stop="select2(1)"
          >
            新股申购
          </div>
          <div
            class="tab-item2"
            :class="{ active: !icon }"
            @click.stop="select2(2)"
          >
            新股上市
          </div>
        </div>
        <div class="box" v-show="icon">
          <table v-if="stock != ''">
            <thead>
              <tr>
                <td width="25%">申购时间</td>
                <td width="30%">股票申购代码</td>
                <td width="22%">发行价格</td>
                <td width="23%">申购上限</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in stock" :key="index">
                <td>
                  <p class="p1">{{ item.publTimeStamp | formatWeek }}</p>
                  <p class="p2">
                    {{ item.publTimeStamp | formatDay("YYYY/MM/DD") }}
                  </p>
                </td>
                <td>
                  {{ item.issueNameAbbrOnline }}
                  <p class="p1">{{ item.applyCodeOnline }}</p>
                </td>
                <td>{{ item.issuePrice | fixed2 }}</td>
                <td>{{ item.applyMaxOnline | wangu }}</td>
              </tr>
            </tbody>
          </table>
          <div class="zwsj" v-else>
            <img
              src="../image/wushuju.png"
              style="width: 100%; margin-top: 15%"
              alt
            />
          </div>
        </div>

        <div class="box" v-show="!icon">
          <table v-if="stock != ''">
            <thead>
              <tr>
                <td width="20%">名称代码</td>
                <td width="20%">发行价</td>
                <td width="25%">预计涨停价</td>
                <td width="20%" style="padding-right: 7px">流通A股</td>
                <td width="15%">行业</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in stock" :key="index">
                <td>
                  <p class="p2">{{ item.stockName }}</p>
                  <p class="p2">{{ item.stockCode }}</p>
                </td>
                <td>{{ item.issuePrice | fixed2 }}</td>
                <td>{{ item.topPrice | fixed2 }}</td>
                <td style="padding-right: 7px">
                  {{ item.issueVolCeiling | wangu }}
                </td>
                <td>{{ item.industryName }}</td>
              </tr>
            </tbody>
          </table>
          <div class="zwsj" v-else>
            <img
              src="../image/wushuju.png"
              style="width: 100%; margin-top: 15%"
              alt
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import format from "date-fns/format";
import { timeFormat } from "../script/fn.js";
import { Toast } from "vant";
import { getHomePage, getCalendar, getStock } from "../api/index";

//流量统计
var _hmt = _hmt || [];
(function () {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?25300353b9fbf7d460bbb97bde0b48ac";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();

export default {
  data() {
    return {
      recNews: [],
      topNews: [],
      stock: [],
      loadShow: true,
      contract: [],
      dividend: [],
      internal: [],
      meeting: [],
      guoji: [
        {
          indicatorName: "——",
          indicatorFact: "——",
          indicatorForecast: "——",
          negativeEffect: "——",
          positiveEffect: "——",
          occurTime: "--:--",
        },
      ],
      type: 1,
      ison: true,
      icon: true,
    };
  },
  mounted() {
    this.dataList();
    this.calendarList();
    this.newStock();
  },
  filters: {
    date: function (value) {
      if (!value) return "";
      return value.substring(11, 16);
    },
    formatStock(val) {
      return val.replace(/-?\d+$/, "");
    },
    conversion: function (value) {
      if (value != "——") {
        value = value / 100000000;
        return value.toFixed(2) + "亿";
      } else {
        return "——";
      }
    },
    fixed2: function (val) {
      if (val != "——") {
        return Number(val).toFixed(2) + "元";
      } else {
        return "——";
      }
    },
    wangu: function (val) {
      if (!val) return "";
      val = val / 10000;
      return Number(val).toFixed(2) + "万股";
    },
    formatDay(val, reg) {
      if (val != "——") {
        return format(val, reg);
      } else {
        return "——";
      }
    },
    formatWeek(val) {
      if (val != "——") {
        return "周" + "日一二三四五六".charAt(new Date(val).getDay());
      } else {
        return "——";
      }
    },
    timeFormat(val) {
      return timeFormat(val);
    },
  },
  methods: {
    link(url, title) {
      const t = Date.now();
      window.prompt(
        "",
        `up://["open.web",${t},{"url":"${url}?${Date.now()}&from=client&inside=1","title":"${title}","popuptype":1}]`
      );
    },
    //格式化日历
    formatData(type, data) {
      const self = this;
      if (type == 1) {
        Object.keys(data).forEach((key1) => {
          data[key1].forEach((item, index1) => {
            Object.keys(item).map((key2, index2) => {
              const param = data[key1][index1][key2];
              data[key1][index1][key2] = param ? param : "——";
              if (key2 == "stockNames") {
                data[key1][index1][key2] = String(param)
                  .split(",")
                  .filter((_, i) => i <= 2);
              }
            });
          });
          this[key1] = data[key1];
        });
      }
      if (type == 2) {
        data.map((item, index) => {
          Object.keys(item).forEach((key) => {
            const param = data[index][key];
            data[index][key] = param ? param : "——";
          });
        });
        self["guoji"] = data;
      }
    },
    //格式化新股
    formatStock(data) {
      console.log(data, "data===");
      return data.map((item, index) => {
        Object.keys(item).forEach((key) => {
          const param = data[index][key];
          data[index][key] = param ? param : "——";
        });
        return item;
      });
    },

    async dataList() {
      const back = await getHomePage();
      if (back.status == 1) {
        let data = back.data;
        this.recNews = data.recommendedNews;
        this.topNews = data.topNews;
      }
    },
    //获取财经日历数据
    async calendarList(type = this.type) {
      this.type = type;
      const send = {
        type: this.type,
      };
      const data = await getCalendar(send);
      if (data != null) {
        this.formatData(type, data);
      }
    },
    //获取新股中心数据
    async newStock() {
      const send = {
        type: this.type,
      };
      const data = await getStock(send);
      if (data != null) {
        this.stock = this.formatStock(data);
      }
    },

    skip() {
      if (!navigator.onLine) return Toast("网络连接失败，请检查网络设置");
      this.$router.push({ name: "setBooks" });
    },
    //日历tab切换
    select1(val) {
      this.ison = this.ison ? false : true;
      this.type = val;
      this.calendarList();
    },
    //新股tab切换
    select2(val) {
      this.stock = [];
      this.type = val;
      this.icon = this.icon ? false : true;
      this.newStock();
    },
    //加载更多
    async loadMore() {
      if (!navigator.onLine) return Toast("网络连接失败，请检查网络设置");
      const last = this.recNews.length - 1;
      const send = {
        page: last,
        limit: 20,
      };
      const back = await getHomePage(send);
      if (back.status == 1) {
        let data = back.data;
        this.recNews = this.recNews.concat(data.recommendedNews);
        if (data.length <= 0) {
          this.loadShow = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
body {
  height: 100%;
}

#recommend {
  width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  padding-bottom: 30px;
  .content-title {
    box-sizing: border-box;
    height: 30px;
    background: #27282e;
    border: 1px solid rgba(67, 68, 72, 1);
    font-size: 15px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    .line-y {
      float: left;
      margin-left: -1px;
      width: 2px;
      height: 28px;
      background: rgba(255, 138, 27, 1);
    }
    .left {
      margin-left: 13px;
      cursor: pointer;
    }
    .right {
      float: right;
      margin-right: 15px;
      color: rgba(188, 191, 196, 1);
      cursor: pointer;
    }
  }
  .content-l {
    width: 826px;
    background: #090910;
    border: 1px solid rgba(50, 51, 55, 1);
    overflow: auto;
    .news {
      cursor: pointer;
      box-sizing: border-box;
      .loadMore {
        text-align: center;
        color: #666666;
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 10px;
        .icon {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-left: 1px solid #666666;
          border-bottom: 1px solid #666666;
          position: relative;
          margin-left: 5px;
          transition: all 0.3s;
          top: -4px;
          transform: rotate(-45deg);
        }
      }
    }
    .breviary {
      padding: 16px 16px 0 16px;
      margin-bottom: 20px;
    }

    .breviary li {
      height: 15px;
      margin-bottom: 16px;
      .red {
        display: inline-block;
        // width: 60px;
        height: 15px;
        margin-right: 6px;
        float: left;
        font-size: 15px;
        font-weight: 400;
        color: rgba(234, 40, 39, 1);
        line-height: 15px;
        margin-bottom: 1px;
      }
      .text {
        width: 659px;
        height: 15px;
        font-size: 15px;
        font-weight: 400;
        color: rgba(188, 191, 196, 1);
        line-height: 15px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .time {
        float: right;
        width: 35px;
        height: 15px;
        font-size: 15px;
        font-weight: 400;
        color: rgba(188, 191, 196, 1);
        line-height: 15px;
      }
    }
    .breviary li .text:hover {
      text-decoration: underline;
    }
    .minute {
      padding-left: 16px;
      overflow: auto;
    }
    .minute li {
      height: 107px;
      margin-bottom: 16px;
      .left {
        width: 167px;
        height: 107px;
        margin-right: 15px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 590px;
        padding-right: 15px;
        h1 {
          font-weight: 400;
          letter-spacing: 1px;
          margin-top: 8px;
          height: 18px;
          font-size: 16px;
          color: rgba(230, 230, 230, 1);
          line-height: 16px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p {
          margin-top: 15px;
          height: 44px;
          font-size: 14px;
          font-weight: 400;
          color: #abaeb2;
          line-height: 22px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        h3 {
          margin-top: 6px;
          height: 10px;
          font-size: 13px;
          font-weight: 400;
          color: #abaeb2;
          line-height: 15px;
        }
      }
    }
    .minute li h1:hover {
      text-decoration: underline;
    }
    .minute li:last-child {
      margin-bottom: 0;
    }
  }
  .content-r {
    width: 358px;
    .tab {
      height: 41px;
      border-bottom: 1px solid rgba(37, 38, 42, 1);
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      line-height: 41px;
      color: #bcbfc4;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .tab-item1 {
        margin-right: 158px;
      }
      .tab-item2 {
        margin-right: 124px;
      }
      .tab-item1:last-child {
        margin-right: 0;
      }
      .tab-item2:last-child {
        margin-right: 0;
      }
      .active {
        color: #ea2828;
        border-bottom: 2px solid #ea2828;
      }
    }
    .menology {
      height: 400px;
      margin-bottom: 16px;
      background: #090910;
      box-sizing: border-box;
      border: 1px solid rgba(50, 51, 55, 1);
      .title {
        height: 16px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(188, 191, 196, 1);
        line-height: 15px;
        img {
          float: left;
          width: 15px;
          height: 15px;
          margin-right: 11px;
        }
      }
      .zwsj {
        text-align: center;
        img {
          width: 100%;
          margin-top: 15%;
        }
      }
      .inland {
        height: 400px;
        overflow-y: scroll;

        .item {
          padding: 14px 0 16px 16px;
          border-bottom: 1px solid rgba(37, 38, 42, 1);
          .ul {
            margin-top: 19px;
            .boxs {
              margin-top: 15px;
              margin-bottom: 8px;
            }
            .boxs:last-child {
              margin-bottom: 0;
            }
            .li {
              width: 95%;
              margin-bottom: 15px;
              font-size: 15px;
              font-weight: 400;
              color: rgba(188, 191, 196, 1);
              line-height: 15px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              div {
                width: 4px;
                height: 4px;
                margin-top: 5px;
                margin-right: 9px;
                background: rgba(153, 153, 153, 1);
                border-radius: 50%;
              }
              p {
                margin-left: 14px;
                margin-top: 9px;
                height: 12px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(140, 140, 140, 1);
                line-height: 12px;
                span {
                  margin-right: 11px;
                }
              }
            }
            .li:last-child {
              margin-bottom: 0;
            }
          }
          .involve {
            margin-top: 13px;
            height: 12px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 15px;
            span {
              height: 12px;
              font-size: 14px;
              font-weight: 400;
              color: rgba(2, 226, 244, 1);
              line-height: 15px;
              margin-right: 10px;
            }
          }
        }
      }
      .internation {
        height: 400px;
        box-sizing: border-box;
        padding-left: 10px;
        overflow-y: scroll;
        .guojiItem {
          padding-top: 14px;
          color: #bcbfc4;
        }
        .time {
          width: 30px;
          font-size: 13px;
          font-weight: 500;
          line-height: 20px;
        }
        .itemBox {
          width: 275px;
          margin-right: 15px;
          border-bottom: 1px solid #25262a;
          .headTitle {
            font-size: 16px;
            font-weight: bold;
            line-height: 20px;
            word-break: break-all;
          }
          .exponent {
            font-size: 14px;
            font-weight: 500;
            padding-top: 11px;
            span {
              margin-right: 10px;
              &:last-child {
                margin-right: 0;
                color: #ea2827;
              }
            }
          }
          .screen {
            margin: 19px 0 11px 0;
            .screenItem {
              width: 131px;
              height: 22px;
              font-size: 13px;
              font-weight: 500;
              border-radius: 7px;
              padding: 2px;
              box-sizing: border-box;
              color: #fff;
              span {
                width: 38px;
                height: 19px;
                line-height: 19px;
                text-align: center;
                display: inline-block;
                background: #fff;
                margin-right: 5px;
                border-radius: 7px 10px 10px 7px;
              }
              &.lihao {
                background: #ea2827;
                span {
                  color: #ea2827;
                }
              }
              &.likong {
                background: #00a200;
                span {
                  color: #00a200;
                }
              }
            }
          }
        }
      }
    }
    table {
      width: 100%;
      height: 12px;
      font-weight: 400;
      line-height: 15px;
      text-align: left;
    }
    table thead {
      font-size: 14px;
      color: #bcbfc4;
    }
    table tbody {
      font-size: 15px;
      color: #bcbfc4;
      line-height: 19px;
    }
    table tbody tr td {
      padding-top: 10px;
      height: 12px;
    }
    .newStock {
      height: 329px;
      background: #090910;
      box-sizing: border-box;
      border: 1px solid rgba(50, 51, 55, 1);
      .box {
        height: 257px;
        overflow-y: scroll;
        padding-left: 15px;
        //   .zwsj {
        //   text-align: center;
        //   background: red;
        //   img {
        //     border: 5px solid #ffffff;
        //     width: 100%;
        //     margin-top: 15%;
        //   }
        // }
      }
      table thead tr {
        height: 36px;
        border-bottom: 1px solid #25262a;
      }
      table tbody {
        font-size: 15px;
        color: #bcbfc4;
        line-height: 19px;
        tr td .p1 {
          font-size: 12px;
        }
        tr td .p2 {
          font-size: 13px;
        }
      }
    }
  }
}
</style>
